<template>
  <div class="goodsindex">
    <!-- 搜索条件 -->
    <el-row :gutter="20" class="goodsindex-queryInfo">
      <!-- 商品名称搜索 -->
      <el-col :lg="4" :md="6" :sm="6" :xl="4" :xs="8">
        <el-input v-model="queryInfo.name" class="goodsindex-queryInfo-li" clearable placeholder="请输入产品名称"
                  size="small"></el-input>
      </el-col>
      <!-- 商品分类搜索 -->
      <el-col :lg="4" :md="6" :sm="6" :xl="4" :xs="8">
        <el-select v-model="queryInfo.type" class="goodsindex-queryInfo-li" clearable placeholder="请选择产品分类"
                   size="small">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.value"
              :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :lg="2" :md="3" :sm="4" :xl="2" :xs="6">
        <el-button class="goodsindex-queryInfo-li" size="small" type="primary">搜索</el-button>
      </el-col>

    </el-row>
    <!-- 检索结果 -->
    <el-row :gutter="20" class="goodsindex-list">
      <el-col :span="24">
        <el-table
            :data="tableData"
            border
            size='small'
            style="width: 100%">
          <el-table-column
              label="序号"
              type="index"
              width="50">
          </el-table-column>
          <el-table-column
              label="商户对外名称"
              min-width="150"
              prop="date">
          </el-table-column>
          <el-table-column
              label="渠道号"
              min-width="200"
              prop="name">
          </el-table-column>
          <el-table-column
              label="联系人"
              min-width="80"
              prop="name">
          </el-table-column>
          <el-table-column
              label="联系电话"
              min-width="150"
              prop="name">
          </el-table-column>
          <el-table-column
              label="所属街道"
              prop="name"
              width="150">
          </el-table-column>
          <el-table-column
              label="合作业务"
              min-width="200"
              prop="name">
          </el-table-column>
          <el-table-column
              label="操作"
              prop="address"
              width="200">
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- 分页 -->
    <el-row :gutter="20" class="goodsindex-list">
      <el-col :span="24" class="goodsindex-page-box">
        <el-pagination
            :current-page="queryInfo.page"
            :hide-on-single-page="true"
            :page-size="queryInfo.pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="400"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryInfo: {
        name: '',
        type: '',
        page: 1,
        pageSize: 10
      },
      options: [
        {
          label: 1,
          value: '安心蔬菜'
        },
        {
          label: 2,
          value: '新鲜牛奶'
        }
      ],
      tableData: []
    }
  },
  methods: {
    handleSizeChange() {

    },
    handleCurrentChange() {

    },
  }
}
</script>

<style scoped>
.goodsindex {
  width: 100%;
  min-height: 100%;
  padding: 15px;
  box-sizing: border-box;
  background: #F5F7F9;

}

/* 搜索 */
.goodsindex-queryInfo {
  margin-bottom: 10px;
}

.goodsindex-queryInfo-li {
  width: 100%;
  height: auto;
}

/* 列表 */
.goodsindex-list {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

/* 分页 */
.goodsindex-page-box {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
}
</style>
